<template>
  <ContentBox has-corner class="construction-info">
    <ContentBoxTitle title="老小区改造数据" />
    <div class="construction-info__content">
      <Bar
        :grid-bottom="30"
        :list="list"
        :canvas-width="360"
        :canvas-height="280"
        :x-axis-margin="17"
      />
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import Bar from '@/components/Bar/index'
export default {
  name: 'ReconstructionInfo',
  components: {
    ContentBox,
    ContentBoxTitle,
    Bar
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss">
.construction-info {
  width: $base * 360px;
  height: $base * 320px;
  // margin-top: $base*10px;

  .content-box-title__content {
    width: $base * 300px;
  }
  .construction-info__content {
    flex: 1;
  }
}
</style>
